import IssueStatusBadge from "@/app/components/IssueStatusBadge";
import {Table} from "@radix-ui/themes";
import React from 'react';
import IssueAction from "@/app/issues/IssueAction";
import Skeleton from "@/app/components/Skeleton";

const LoadingIssuesPage = () => {
    const issues =[1,2,3,4,5];
    return (
        <div>
          <IssueAction/>
            <Table.Root variant={"surface"}>
                <Table.Header>
                    <Table.Row>
                        <Table.ColumnHeaderCell>Issue</Table.ColumnHeaderCell>
                        <Table.ColumnHeaderCell>Status</Table.ColumnHeaderCell>
                        <Table.ColumnHeaderCell>CreatAt</Table.ColumnHeaderCell>
                    </Table.Row>
                </Table.Header>
                <Table.Body>
                    {issues.map((issue)=>(
                        <Table.Row key={issue}>
                            <Table.Cell><Skeleton/></Table.Cell>
                            <Table.Cell><Skeleton/></Table.Cell>
                            <Table.Cell><Skeleton/></Table.Cell>
                        </Table.Row>
                    ))}
                </Table.Body>
            </Table.Root>
        </div>
    );
};

export default LoadingIssuesPage;